@extends('layouts.auth')

@section('title', '注册绑定微信')

@section('auth-title', '注册并绑定微信')

@section('auth-content')
<!-- 微信用户信息展示 -->
<div class="wechat-user-info">
    <div class="wechat-avatar">
        <img id="wechat-avatar" src="{{ session('wechat_temp_user_info.avatar') }}" alt="微信头像">
    </div>
    <div class="wechat-nickname" id="wechat-nickname">{{ session('wechat_temp_user_info.nickname') }}</div>
    <div class="bind-tip">注册完成后将自动绑定此微信账号</div>
</div>

<!-- 注册表单 -->
<form class="auth-form" id="register-form" method="POST" action="{{ route('wechat.register.bind.submit') }}">
    @csrf

    <div class="form-group">
        <label class="form-label" for="name">用户名</label>
        <input type="text" id="name" name="name" class="form-input" placeholder="请设置用户名" required value="{{ old('name') }}">
        <div class="error-message" id="name-error"></div>
        @error('name')
            <div class="error-message" style="display: block;">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group">
        <label class="form-label" for="password">密码</label>
        <input type="password" id="password" name="password" class="form-input" placeholder="请设置密码（至少6位）" required minlength="6">
        <div class="error-message" id="password-error"></div>
        @error('password')
            <div class="error-message" style="display: block;">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group">
        <label class="form-label" for="password_confirmation">确认密码</label>
        <input type="password" id="password_confirmation" name="password_confirmation" class="form-input" placeholder="请再次输入密码" required minlength="6">
        <div class="error-message" id="confirm-password-error"></div>
    </div>

    <div class="form-group agreement-check">
        <label class="checkbox-container">
            <input type="checkbox" id="agreement" name="agreement" >
            <span class="checkmark"></span>
            <span class="agreement-text">我已阅读并同意</span>
        </label>
        <a href="{{ route('article.show', ['key' => 'user_agreement']) }}" class="agreement-link" target="_blank">《用户协议》</a>
        <span class="agreement-text">、</span>
        <a href="{{ route('article.show', ['key' => 'privacy_policy']) }}" class="agreement-link" target="_blank">《隐私协议》</a>
        <span class="agreement-text">和</span>
        <a href="{{ route('article.show', ['key' => 'vip_service_agreement']) }}" class="agreement-link" target="_blank">《会员用户协议》</a>
        <div class="error-message" id="agreement-error"></div>
    </div>

    <button type="submit" class="btn btn-primary" id="register-btn">注册并绑定微信</button>
</form>
@endsection

@section('auth-footer')
<a href="{{ route('wechat.bind') }}" class="auth-link">返回上一步</a> |
<a href="{{ route('wechat.login.bind') }}" class="auth-link">已有账号登录</a>
@endsection

@push('styles')
<style>
    .wechat-user-info {
        text-align: center;
        margin-bottom: 30px;
        padding: 20px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    .wechat-avatar {
        width: 60px;
        height: 60px;
        margin: 0 auto 10px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid #07C160;
    }

    .wechat-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .wechat-nickname {
        font-size: 16px;
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 5px;
    }

    .bind-tip {
        font-size: 12px;
        color: #07C160;
        font-weight: 500;
    }

    .agreement-check {
        margin-top: 15px;
        margin-bottom: 20px;
    }

    .checkbox-container {
        display: inline-flex;
        align-items: baseline;
        position: relative;
        cursor: pointer;
        user-select: none;
    }

    .checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .checkmark {
        height: 20px;
        width: 20px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-right: 8px;
    }

    .checkbox-container:hover input ~ .checkmark {
        background-color: #f9f9f9;
    }

    .checkbox-container input:checked ~ .checkmark {
        background-color: #667eea;
        border-color: #667eea;
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .checkbox-container input:checked ~ .checkmark:after {
        display: block;
    }

    .checkbox-container .checkmark:after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .agreement-text {
        font-size: 14px;
        color: #718096;
    }

    .agreement-link {
        font-size: 14px;
        color: #667eea;
        text-decoration: none;
    }

    .agreement-link:hover {
        text-decoration: underline;
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // 表单提交
    $('#register-form').submit(function(e) {
        e.preventDefault();

        // 清除之前的错误信息
        $('.error-message').hide();
        $('.form-input').removeClass('error');

        // 验证表单
        if (!validateForm()) {
            return;
        }

        const formData = $(this).serialize();
        const submitBtn = $('#register-btn');

        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: formData,
            beforeSend: function() {
                submitBtn.prop('disabled', true).text('注册中...');
            },
            success: function(response) {
                if (response.success) {
                    showSuccess('注册成功！微信账号绑定完成，即将跳转...');
                    setTimeout(function() {
                        window.location.href = response.redirect_to || '{{ route("home") }}';
                    }, 1500);
                } else {
                    showError(response.message || '注册失败，请重试');
                    submitBtn.prop('disabled', false).text('注册并绑定微信');
                }
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false).text('注册并绑定微信');

                if (xhr.status === 422) {
                    // 验证错误
                    const errors = xhr.responseJSON.errors;
                    for (let field in errors) {
                        $(`#${field}`).addClass('error');
                        $(`#${field}-error`).text(errors[field][0]).show();
                    }
                    let message = '注册失败，请重试';
                    showError(message);
                } else {
                    let message = '注册失败，请重试';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                    showError(message);
                }
            }
        });
    });

    // 表单验证
    function validateForm() {
        let isValid = true;
        let info = '';

        // 验证用户名
        const name = $('#name').val();
        if (!name || name.length < 2) {
            $('#name').addClass('error');
            info = '用户名至少2个字符';
            $('#name-error').text(info).show();
            isValid = false;
        }

        // 验证密码
        const password = $('#password').val();
        if (!password || password.length < 6) {
            $('#password').addClass('error');
            info = '密码至少6位';
            $('#password-error').text(info).show();
            isValid = false;
        }

        // 验证确认密码
        const confirmPassword = $('#password_confirmation').val();
        if (password !== confirmPassword) {
            info = '两次输入的密码不一致';
            $('#password_confirmation').addClass('error');
            $('#confirm-password-error').text(info).show();
            isValid = false;
        }

        // 验证协议勾选
        if (!$('#agreement').is(':checked')) {
            info = '请阅读并同意用户协议、隐私协议和会员用户协议';
            $('#agreement-error').text(info).show();
            isValid = false;
        }

        if (info) showError(info)
        return isValid;
    }

    // 实时验证确认密码
    $('#password_confirmation').on('input', function() {
        const password = $('#password').val();
        const confirmPassword = $(this).val();

        if (confirmPassword && password !== confirmPassword) {
            $(this).addClass('error');
            $('#confirm-password-error').text('两次输入的密码不一致').show();
        } else {
            $(this).removeClass('error');
            $('#confirm-password-error').hide();
        }
    });
});
</script>
@endpush
